<template>
  <view>
    <view 
      class="menu-button" 
      @click="toggleMenu"
    >
      <image src="../../static/gengduo-2.png" mode="aspectFit" class="icon"></image>
    </view>
    <view 
      class="menu" 
      v-show="isMenuVisible" 
	  :class="{expend: isMenuVisible}"
    >
      <button @click="deletefunc(aimid,currectpage)" class="button">删除</button>
	  <button @click="donefunc(aimid,currectpage)" class="button">回调</button>
	  <button @click="modify()" class="button">修改</button>
    </view>
  </view>
</template>

<script setup>
import db from '../../util/db';
import { ref,defineEmits,defineProps } from 'vue';
import {onShow} from "@dcloudio/uni-app";
onShow(()=>{
	isMenuVisible.value = false;
})
const props = defineProps({
	aimid:{
		type:Number,
		default(){
			return 1;
		},
	},
	currectpage:{
		type:Number,
		default(){
			return 0;
		},
	},
})
// 定义修改内容
function modify()
{
	console.log("进入修改流程");
	uni.navigateTo({
		url:`/pages/addevent/addevent?did=${props.aimid}`,
	});
}
const emit = defineEmits(["delete"]);
// 定义完成函数内容
async function donefunc(aid,currectpage)
{
	plus.nativeUI.confirm("确定要回调事件吗？",async function(e){
		if(e.index == 0)
		{
			toggleMenu();
			console.log(aid);
			await db.openDatabase();
			console.log("执行到delete");
			await db.reAddEvent(aid);
			await db.closeDatabase();
			if(currectpage != 0)	
			{
				uni.navigateBack();
			}
			emit('delete', { someData: 'Hello, Vue 3!' });
			console.log("-------------",e);
		}
		else{
			return;
		}
	});
}
// 定义删除函数内容
async function deletefunc(aid,currectpage)
{
	plus.nativeUI.confirm("确定要删除事件吗？",async function(e){
		if(e.index == 0)
		{
			toggleMenu();
			console.log(aid);
			await db.openDatabase();
			console.log("执行到delete");
			await db.deleteDoneEvent(aid);
			await db.closeDatabase();
			if(currectpage != 0)	
			{
				uni.navigateBack();
			}
			emit('delete', { someData: 'Hello, Vue 3!' });
			console.log("-------------",e);
		}
		else{
			return;
		}
	});
}
// 使用 ref 来创建响应式数据
const isMenuVisible = ref(false); // 控制菜单显示与隐藏的状态
 
// 定义切换菜单显示状态的方法
function toggleMenu() {
  isMenuVisible.value = !isMenuVisible.value;
}
</script>
<style>
.expend{
	transform-origin: top;
	animation: expendA 0.5s ease 1;
}
@keyframes expendA{
	from{
		transform: scale(1,0);
	}
	to{
		transform: scale(1,1);
	}
}
.button{
	background-color: white;
	width: 100%;
	flex:1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.menu-button {
  width: 120rpx;
  height: 80rpx;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid white;
  background-color: white; /* 移除背景色 */
  padding: 0; /* 移除内边距 */
  cursor: pointer; /* 添加鼠标悬停时的手型图标 */
}

.menu {
	display: flex;
	justify-content: center;
	background-color: white; 
	align-items: center;
	flex-direction: column; 
	width: 150rpx;
	height: 300rpx; 
	position: absolute;
	top: 60rpx;
	left: 0%;
	border: 1rpx solid #ccc;
	z-index: 1;
}

.icon{
	width: 60rpx;
	height: 60rpx;
}
</style>